<template>
	<div id="pageWarp" :class="['tuan-join-wrap',{'head-top-margin':!isApp}]">
		<!--悬浮栏-->
		<div v-if="!isApp" class="fix-bar">
			<fixbar></fixbar>
		</div>
		<!--banner-->
		<div class="banner">
			<img class="banner-img" :src="commodityData.imgUrl" alt="商品图片">
		</div>
		<!--详情页信息-->
		<div class="page-info">
			<div class="info-head">
				<i :class="commodityData.mdseType | markType"></i>
				<i class="icon-type">{{commodityData.type | joinTuanType}}</i><!-- <span class="info-head-title">限未到店新客参团</span> --><span class="info-head-msg"><em>{{commodityData.count}}</em>人已团</span>
			</div>
			<h3 class="info-title">{{commodityData.desc}}</h3>
			<p class="info-cont">
				{{commodityData.pointDesc}}
				
			</p>
			<strong v-if="commodityData.type == 0" class="warning">该商品所有用户均可开团，仅限未到车享家门店消费过的新用户参团哦，开团后快邀请新朋友参团吧！</strong>
		</div>
		<!--团推荐-->
		<div v-if="recommendData.length > 0" class="recommend">
			<recommend :recommendData="recommendData" :slogan="slogan" :prizeCode="prizeCode"></recommend>
		</div>
		<!--查看使用门店-->
		<div class="quer-store" v-if="commodityData.mdseType == 0">
			<a ca="pt_v170720_ptdetail_store_click" :href="queryStoreUrl + commodityData.groupBuySpuCode" class="store-btn">查看适用门店<i class="icon-arrow"></i></a>
			<!-- <query-store :spuCode="commodityData.spuCode"></query-store> -->
		</div>
		<!--活动规则-->
		<div class="rule">
			<rule :mdseTypeProp="commodityData.mdseType"></rule>
		</div>
		<!--商品描述-->
		<div class="describe">
			<describe :descData="commodityData.itemDetail"></describe>
		</div>
		<!--按钮-->
		<div class="page-goto clearfix">
			<a :ca="'pt_v170720_ptdetail_directbuy_click'+commodityData.skuCode" :href="commodityData.mallUrl" class="tuan-btn"><span class="price">&yen;{{commodityData.price}}</span><span class="text">直接购买</span></a>
			<a ca="pt_v170720_ptdetail_creategroup_click" v-if="commodityData.status == '1'" @click="gotoSubmitOrder(signUrl)" class="link"><span class="price">&yen;{{commodityData.groupPrice}}</span><span class="text">开{{commodityData.num}}人团</span></a>
			<a v-if="commodityData.status == '2' || commodityData.status == '3' || commodityData.status == '4'" href="javascript:;" class="link no-link">{{commodityData.status | tuanDetailText}}</a>
		</div>
		<!--低于3.5版本APP调用分享按钮-->
		<a v-if="!isShowShareBtn && isApp" @click="shareApp35" href="javascript:;" class="share-btn"></a>
		<!--提示信息弹窗-->
		<div v-if="pagePopType" class="page-pop-info">
			<a href="javascript:;" @click="pagePopType = !pagePopType" class="close-pop"></a>
			<h4 class="page-pop-title tc">{{pagePopInfo.pagePopTitle}}</h4>
			<p class="page-pop-content tc">{{pagePopInfo.pagePopContent}}</p>
			<em class="page-pop-em tc">{{pagePopInfo.pagePopEm}}</em>
			<a ca="pt_v170720_groupdetail_creategroup_click" :href="pagePopInfo.pagePopBtnLink" class="page-pop-btn tc">{{pagePopInfo.pagePopBtnText}}</a>
		</div>
		<!--遮罩层-->
		<div v-if="pagePopType" class="page-pop-info-black"></div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import recommend from '../common/recommend.vue';//团推荐
	//import queryStore from '../common/queryStore.vue';//选择门店
	import rule from '../common/rule.vue';//规则
	import describe from '../common/describe.vue';//商品描述
	import fixbar from '../common/fixbar.vue';//悬浮栏
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				shareObj:'',
				opentype: common.getCookie('wemall_opentype_c'),
				signUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
				initDtailUrl:common.isdev() + '/activity/groupbuy/activityGroupDetail.htm',
				commodityData:'',//商品详情页面数据
				recommendData:[],//团推荐列表数据
				slogan:['就等你了','帮我拼团','一起拼团吧','真的很不错','快，参我的团','这价格没谁了'],//团购口号
				groupId:'',
				//prizeCode:'AGBUYPRIZE001',
				prizeCode:common.getQueryString('prizeCode'),
				orderUrl:'/cx/cxj/cxjweb/tuan/pay/tuan-pay.shtml',
				isShowShareBtn:common.checkAppversionIsGt35(),
				isApp:common.isApp(),
				checkLoginUrl:common.isdev() + '/activity/groupbuy/checkLogin.htm',//登录验证接口
				checkOldUserUrl:common.isdev() + '/activity/groupbuy/checkLimitCount.htm',//验证是否为老用户的接口
				pagePopType:false,
				pagePopInfo:{
					pagePopTitle:'',
					pagePopContent:'',
					pagePopEm:'',
					pagePopBtnText:'',
					pagePopBtnLink:''
				},
				queryStoreUrl:'/cx/cxj/cxjweb/tuan/querystore/queryStore.shtml?spuCode=',//店门链接
				ruleUrl:'/cx/cxj/cxjweb/tuan/rule/rule.shtml',
				listUrl:'/cx/cxj/cxjweb/tuan/list/tuan-list.shtml'//拼团活动列表页链接
			};
		},
		components: {
			//团推荐
			recommend,
			//查看使用门店
			//queryStore,
			//活动规则
			rule,
			//商品描述
			describe,
			//悬浮栏
			fixbar
		},
		created (){
			//common.goLogin();
			//初始化详情页数据调用
			this.initDtail();
		},
		methods: {
			initDtail:function(){
				var _self = this;
				let option = {
					prizeCode: _self.prizeCode
				}
				//请求数据
				common.vueAjax('get', _self.initDtailUrl, option).then(res => {

					//res.data.result 1:成功 2:失败
					if(res.data.result == 1){

						_self.commodityData = res.data.obj.groupDetailVO;
						//跳转到车品下单页或购券下单页
						if (_self.commodityData.mdseType == 1) {
							_self.orderUrl='/cx/cxj/cxjweb/tuan/pay/tuan-pay-cp.shtml';
						}
						//临时添加的一个组织特定商品被购买的不合理逻辑
						if(_self.prizeCode == 'AGBUYPRIZE001'){
							_self.commodityData.status = '4';
						}
						//团推荐列表，只显示2条
						if(res.data.obj.groupList.length){
							var length = 2
							if (res.data.obj.groupList.length < length) {
								length = res.data.obj.groupList.length;
							}
							for(var i = 0; i < length; i++){

								_self.recommendData.push(res.data.obj.groupList[i])

							}
						}
						_self.shareFunc();

						_self.$nextTick(function(){
							setTimeout(function(){
								common.ANA_AnalyticsScan();
							});
						});

					}else{

						Toast(res.data.msg);

					}
				}, err => {
					console.log(err);
					//Toast(err.data.msg);

				});
			},
			//分享方法
			shareFunc:function(){
				var _self = this;
					//定义分享时的参数
					_self.shareObj = {
						friend: {
							desc:'车享家人气拼团只需'+ _self.commodityData.groupPrice + '元，' + _self.commodityData.desc + '特价拼团中！',
							title: '已有' + _self.commodityData.count + '人成功参团，一起来拼团吧！',
							link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?prizeCode=' + _self.prizeCode + '&utm_source=share',
							imgUrl: _self.commodityData.imgUrl
						},
						friendQuan: {
							desc:'车享家人气拼团只需'+ _self.commodityData.groupPrice + '元，' + _self.commodityData.desc + '特价拼团中！',
							title:'车享家人气拼团只需'+ _self.commodityData.groupPrice + '元，' + _self.commodityData.desc + '特价拼团中！',
							//title: '已有' + _self.commodityData.num + '人成功参团，一起来拼团吧！',
							link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?prizeCode=' + _self.prizeCode + '&utm_source=share',
							imgUrl: _self.commodityData.imgUrl
						}
					};

					//判断是否在APP内
					if(!common.isApp()){
						//执行微信
						//alert('isApp');
						common.wxShare(_self);
					}else if(_self.isShowShareBtn){
						//分享方法
						//alert('3.5版本判断');
						setTimeout(function(){
							common.appShare(_self);
						}, 1000)
						
					}
			},
			//分享方法，低于3.5版本调用
			shareApp35:function(){

				var _self = this;

				common.appShare(_self);

			},
			//跳转至提交订单页面
			gotoSubmitOrder:function(curl){

				var _self = this,
					h = window.location.protocol + "//" + window.location.host;

				common.vueAjax('post', _self.checkLoginUrl).then(res => {

					if(res.data.result == -99){
						
						common.goLogin();

					}else{

						_self.checkOldUser(res.data.result.userId);

					}

				},err => {

					console.log(err);

				});

			},
			//验证是否为老用户
			checkOldUser:function(userId){

				var _self = this;

				let option = {

						prizeCode:_self.prizeCode,
						//userId:userId
						userId:userId

					}

				common.vueAjax('post', _self.checkOldUserUrl, option).then(res => {
					//失败result == 0,成功result == 1,只有新人才可以参加result == 2,该商品已达到上限人数result == 3
					switch(res.data.result){

						case 0:
							Toast(res.data.msg);
							break;
						case 1:
							_self.gotoSubmitOrderLink();
							break;
						case 2:
							_self.pagePopInfo.pagePopTitle = '抱歉！仅限新客';
							_self.pagePopInfo.pagePopContent = '此商品仅限未到车享家门店消费过的新客户参团哦';
							_self.pagePopInfo.pagePopEm = '你已经是老朋友啦';
							_self.pagePopInfo.pagePopBtnText = '自己开团';
							_self.pagePopInfo.pagePopBtnLink = _self.detailUrl;
							_self.pagePopType = true;
							break;
						case 3:
							_self.pagePopInfo.pagePopTitle = '抱歉！';
							_self.pagePopInfo.pagePopContent = '此商品每位用户限购' + res.data.obj + '件';
							_self.pagePopInfo.pagePopEm = '看看其他拼团活动吧';
							_self.pagePopInfo.pagePopBtnText = '更多拼团活动';
							_self.pagePopInfo.pagePopBtnLink = _self.listUrl;
							_self.pagePopType = true;
							break;

					}
					
				},err => {

					console.log(err);

				})

			},
			//跳转至订单提交页面
			gotoSubmitOrderLink:function(){
				var _self = this,
					h = window.location.protocol + "//" + window.location.host;

				if(_self.opentype != 6){
					window.location.href = _self.signUrl + "/wxoauth2/s/setOpenIdToCookie.htm?turl=" + h + _self.orderUrl + '?prizeCode=' + _self.prizeCode + '&groupId=' + _self.groupId;
				}else{
					window.location.href = h + _self.orderUrl + '?prizeCode=' + _self.prizeCode + '&groupId=' + _self.groupId;
				}
			}

		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		-webkit-overflow-scrolling:touch;
	}
	.page-warp {
		
	}
	/*banner*/
	.banner{
		width:100%;
		height:rem(250);
		overflow:hidden;
		.banner-img{
			width:100%;
			height:100%;
		}
	}
	.page-info{
		padding:0 rem(15);
	}
	/*详情页信息*/
	.page-info{
		background-color:#fff;
		padding-bottom:rem(17);
		margin-bottom:rem(8);
		.info-head{
			font-size: 0;
			color:#ff6600;
			padding:rem(15) 0;
		}
		.info-title{
			font-size:rem(17);
			color:#000;
			margin-bottom:rem(5);
		}
		.info-cont{
			font-size:rem(13);
			height:rem(32);
			overflow:hidden;
			color:#888;
		}
		
		.mark-type-01 {
			display: inline-block;
			vertical-align: top;
			width: 6rem;
			height:1.8rem;
			margin-right: 0.5rem;
			padding: 0;
			background:url(../../../assets/image/tuan/mark/mark-type-01.png) center center no-repeat;
			background-size: contain;
		}
		.mark-type-02 {
			display: inline-block;
			vertical-align: top;
			width: 6rem;
			height:1.8rem;
			margin-right: 0.5rem;
			padding: 0;
			background:url(../../../assets/image/tuan/mark/mark-type-02.png) center center no-repeat;
			background-size: contain;
		}
		/*info-head团购状态的小标签*/
		.icon-type{
			padding:rem(2);
			text-align:center;
			font-size:rem(11);
			display:inline-block;
			background-color:#ffefe5;
			margin-right:rem(11);
		}
		/*info-head标题*/
		.info-head-title{
		}
		/*info-head信息*/
		.info-head-msg{
			float:right;
			font-size:rem(13);
			color:#b1b1b1;
			em{
				color:#ff6600;
			}
		}
		.warning{
			font-size:rem(13);
			color:#ff6600;
			font-weight:normal;
		}
	}
	/*团推荐*/
	.recommend{
		margin-bottom:rem(8);
	}
	/*查看使用门店*/
	.store-btn{
		padding:rem(12) rem(14);
		background-color:#fff;
		display:block;
		font-size:rem(15);
		color:#000;
		border-bottom:rem(8) solid #f6f6f6;
	}
	.icon-arrow{
		float:right;
		width:rem(7);
		height:rem(12);
		background:url('../../../assets/image/tuan/arrow.png') no-repeat;
		background-size:100% 100%;
		display:block;
		margin-top:rem(4);
	}
	/*活动规则*/
	.rule{
		padding:rem(11) rem(15) rem(16) rem(15);
		background-color:#fff;
		border-bottom:rem(8) solid #f6f6f6;
	}
	.rule-link{
		font-size:rem(15);
		padding-bottom:rem(14);
		margin-bottom:rem(15);
		border-bottom:1px solid #e7e7e7;
		display:block;
		color:#000;
		.des{
			font-size:rem(13);
			color:#888;
			float:right;
		}
		.icon-arrow{
			float:right;
			width:rem(7);
			height:rem(12);
			background:url('../../../assets/image/tuan/arrow.png') no-repeat;
			background-size:100% 100%;
			display:block;
			margin-top:rem(4);
			margin-left:rem(9);
		}
	}
	.rule-content{
		/*步骤*/
		.step{
			margin-bottom:rem(14);
		}
		.step-item{
			font-size:rem(13);
			margin-right:rem(15);
			float:left;
			.number{
				width:rem(16);
				height:rem(16);
				line-height:rem(16);
				text-align:center;
				background-color:#000;
				display:inline-block;
				color:#fff;
				vertical-align: top;
				border-radius:16px;
				margin-right:rem(5);
			}
			.text{
				width:rem(54);
				height:rem(30);
				line-height:rem(15);
				display:inline-block;
				vertical-align: middle;

			}
		}
	}
	.rule-msg{
		font-size:rem(13);
		color:#999;
	}
	/*修补型样式*/
	.step-item:last-child{
		margin:0;
	}
	/*按钮*/
	.page-goto{
		width:100%;
		border-top:1px solid #e7e7e7;
		padding:rem(8) 0;
		background-color:#fff;
		position:fixed;
		bottom:0;
		z-index:10;
		.tuan-btn, .link{
			width:rem(168);
			height:rem(42);
			line-height:rem(42);
			border:1px solid #ff6600;
			border-radius:4px;
			display:block;
			text-align:center;
		}
		.tuan-btn{
			float:left;
			font-size:0;
			background-color:#ffefe5;
			color:#ff6600;
			margin-left:rem(8);
			.price{
				font-size:rem(19);
				margin-right:rem(5);
				display:inline-block;
			}
			.text{
				font-size:rem(11);
			}

		}
		.link{
			float:right;
			font-size:0;
			background-color:#ff6600;
			color:#fff;
			margin-right:rem(8);
			.price{
				font-size:rem(19);
				margin-right:rem(5);
				display:inline-block;
			}
			.text{
				font-size:rem(11);
			}
		}
		.no-link{
			background-color:#ccc;
			border:1px solid #ccc;
			font-size:rem(17);
		}
	}
	/*商品描述*/
	.describe{
		padding-bottom:rem(55);
	}
	/*悬浮栏*/
	.fix-bar{
		width:100%;
		position:fixed;
		top:0;
		left:0;
	}
	//追加一个头部位置
	.head-top-margin{
		margin-top:rem(55);
	}

		/*页面按钮信息弹层*/
	.page-pop-info{
		width:rem(270);
		height:rem(267);
		position:fixed;
		top:rem(201);
		left:0;
		right:0;
		margin:0 auto;
		background-color:#fff;
		border-radius:8px;
		z-index:1001;
		/*关闭按钮*/
		.close-pop{
			width:rem(15);
			height:rem(15);
			background:url('../../../assets/image/tuan/close.png') no-repeat;
			background-size:100% 100%;
			display:block;
			position:absolute;
			top:rem(10);
			right:rem(10);
		}
		/*信息弹层标题*/
		.page-pop-title{
			font-size:rem(19);
			color:#030303;
			margin-top:rem(44);
		}
		/*信息弹层内容*/
		.page-pop-content{
			padding:0 rem(15);
			font-size:rem(17);
			color:#666;
			margin-top:rem(25);
		}
		/*信息弹层描述*/
		.page-pop-em{
			width:100%;
			display:inline-block;
			font-size:rem(13);
			color:#999;
			margin-top:rem(20);
		}
		/*信息弹层按钮*/
		.page-pop-btn{
			width:rem(170);
			height:rem(44);
			line-height:rem(44);
			display:block;
			margin:rem(24) auto 0 auto;
			font-size:rem(17);
			color:#fff;
			background-color:#ff6600;
			border-radius:4px;
		}
	}
	.page-pop-info-black{
		display:block;
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		margin:auto;
		background-color:rgba(0,0,0,0.8);
		z-index:1000;
	}
	/*分享按钮*/
	.share-btn{
		width:rem(50);
		height:rem(50);
		display:block;
		background:url('../../../assets/image/tuan/share.png') no-repeat;
		background-size:100% 100%;
		position:fixed;
		right:1rem;
		bottom:10%;
	}
</style>
